<template>
  <div class="zl-card" ref="card">
    <div class="zl-card-body">
      <span class="zl-card-body__title" v-if="isTitleBefore" :style="titleStyle">{{title}}</span>
      <span class="zl-card-body__value" :style="style">{{value}}</span>
      <span class="zl-card-body__title" v-if="!isTitleBefore" :style="titleStyle">{{title}}</span>
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  data () {
    return {
      style: {},
      value: '',
      title: '',
      titleStyle: {},
      isTitleBefore: true
    }
  },
  props: {
    graphOptions: {
      required: true,
      type: Object
    },
    config: {
      type:Object,
      default:function () {
          return {}
      }
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    summaryWayMani(type) {
      if (!this.graphOptions.dataset || !Array.isArray(this.graphOptions.dataset)) {
        return
      }
      let source = this.graphOptions.dataset[0].source
      let sum = 0
      let min = 0
      let max = 0
      for (let i = 0; i < source.length; i++) {
        const item = source[i];
        if (item.length === 2) {
          if (type === 'min') {
            if (i === 0) {
              min = parseFloat(item[1])
            } else {
              min > parseFloat(item[1]) && (min = parseFloat(item[1]))
            }
          } else if (type === 'max') {
            max < parseFloat(item[1]) && (max = parseFloat(item[1]))
          } else {
            sum += parseFloat(item[1])
          }
        }
      }
      if (type === 'sum') {
        this.value = sum
      } else if (type === 'average') {
        this.value = (sum / source.length).toFixed(2)
      } else if (type === 'min') {
        this.value = min
      } else if (type === 'max') {
        this.value = max
      }
    },
    init() {
      if (this.graphOptions) {
        this.$refs.card.style.background = 'none'
        if (this.graphOptions.backgroundColorURL) {
           // 设置背景
          this.backgroundColorURL = this.graphOptions.backgroundColorURL
          if(this.backgroundColorURL){
            this.$refs.card.style.background = 'url(' + this.backgroundColorURL + ') no-repeat'
            this.$refs.card.style.backgroundSize = '100% 100%'
          }
        }
        if (this.graphOptions.backgroundColor) {
            this.$refs.card.style.backgroundColor = this.graphOptions.backgroundColor
        }
      }
      if (!this.graphOptions || (typeof this.graphOptions === 'object' && Object.keys(this.graphOptions).length === 0) || !this.graphOptions.others) {
        return
      }

      // 全屏时计算字体缩放比例
      let scale = 1
      if (Object.keys(this.config).length > 0) {
        let config = this.config
        let wp = window.screen.width / parseInt(config.left)
        let hp = window.screen.height / parseInt(config.top)
        wp > hp ? scale = wp : scale = hp
      }
      let basic = this.graphOptions.others
      this.style = {
        fontSize: basic.fontSize * scale + 'px',
        color: basic.color
      }
      switch (basic.way) {
        case '求和':
          this.summaryWayMani('sum')
          break;
        case '平均值':
          this.summaryWayMani('average')
          break;
        case '最大值':
          this.summaryWayMani('max')
          break;
        case '最小值':
          this.summaryWayMani('min')
          break;
        default:
          break;
      }
      this.title = basic.titleText
      this.titleStyle = {
        fontSize: basic.titleSize * scale + 'px',
        color: basic.titleColor
      }
      switch (basic.titlePosition) {
        case 'left':
          this.isTitleBefore = true
          this.titleStyle.paddingRight = '12px'
          break;
        case 'top':
          this.isTitleBefore = true
          this.titleStyle.display = 'block'
          break;
        case 'right':
          this.isTitleBefore = false
          this.titleStyle.paddingLeft = '12px'
          break;
        case 'bottom':
          this.isTitleBefore = false
          this.titleStyle.display = 'block'
          break;
        default:
          break;
      }
    },
    getDataURL() {
    	return null
    }
  },
  watch: {
    graphOptions: {
      handler(val) {
        this.init()
      },
      deep: true
    }
  }
}
</script>
<style rel="stylesheet/less" lang="less" scoped>
.zl-card {
  position: relative;
  height: 100%;
  width: 100%;
}
.zl-card .zl-card-body {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.zl-card-body .zl-card-body__title, .zl-card-body .zl-card-body__value {
  vertical-align: middle;
}
</style>
